<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_suYMQ0',
'img_XpXcC1',
'img_hUVkA2',
'img_b3CQ_3',
'img_Z1ppL4',
'img_GAYK05',
'ZY_CanLuBuPian_6',
'ZY_BuGanShenYiJing_7',
'ZY_ShangPinJieShao_8',
'img_b0qEm9',
'img_wF1Ue10'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/rjzht/pc/css/swiper.min.css">
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/rjzht/pc/css/animate.css">
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/rjzht/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>.header .nav-item:hover a{
   color:#ffffff;
  } .header-wrap{ position: relative; background: #688778; } .wrap{ padding: 45px 0 60px; } .product-detail{ margin-bottom: 60px; } .product-detail .left{ width: 400px; flex: 0 0 400px; margin-right: 40px; } .product-detail .left img{ width: 100%; } .product-detail .left .img{ height: 400px; border: 1px solid #F7F7F7; } .product-detail .left .small-img-wrap{ width: 100%; margin-top: 20px; } .product-detail .left .small-img{ width: 20%; padding: 0 5px; cursor: pointer; box-sizing: border-box; } .product-detail .left .small-img:nth-child(1){ padding-left: 0; } .product-detail .left .small-img:nth-last-of-type(1){ padding-right: 0; } .product-detail .left .small-img img{ display: block; border: 1px solid #F7F7F7; height: 75px; box-sizing: border-box; } .product-detail .left .small-img.active img{ border: 1px solid #688778; } .product-detail .right .name{ font-size: 42px; margin-bottom: 20px; } .product-detail .right .desc{ width: 100%; min-height: 340px; padding: 20px; background: #F7F7F7; color: #688778; font-size: 16px; line-height: 30px; box-sizing: border-box; } .wrap .title{ background: #F7F7F7; border-bottom: 1px solid #688778; } .wrap .title .txt{ display: inline-block; font-size: 18px; background: #688778; color: #ffffff; height: 40px; padding: 0 25px; line-height: 40px; } .wrap .article{ padding: 45px 0; font-size: 16px; line-height: 30px; } .wrap .article img{ display: block; max-width: 100%; }</style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body>
 <jsp:include page="_top.jsp"></jsp:include>
 <cms:art var="art" id="${param.id }"  queryAround="true" ></cms:art>
  <div class="wrap"> 
   <div class="container"> 
    <div class="product-detail flex"> 
     <div class="left">
      <img src="${fn:length(art.images) > 0 ? art.images[0].path : ''}" class="img zy" id="main_img" data-type="ad" data-id="${img_suYMQ0.adId}">
      <div class="flex small-img-wrap">
       <c:forEach items="${art.images }" var="artImg" varStatus="status" >
       <div class="small-img">
        <img src="${artImg.path}" class="zy">
       </div>
       </c:forEach>
      </div>
     </div> 
     <div class="right flex-1"> 
      <h2 class="name zy">${art.artTitle}</h2>
      <p class="desc zy">${art.artAbstract}</p>
     </div> 
    </div> 
    <div class="title"> 
     <span class="txt zy" data-type="ad" data-id="${ZY_ShangPinJieShao_8.adId}">${ZY_ShangPinJieShao_8.adTitle}</span> 
    </div> 
    <div class="article">
     ${art.artContent}
    </div> 
   </div> 
  </div>
 <jsp:include page="_footer.jsp"></jsp:include>
 <script src="http://hwfile.jyymatrix.cc/rjzht/pc/js/swiper.min.js"></script>
  <script>
        var itemEls = document.getElementsByClassName('small-img');
        var mainImg = document.getElementById('main_img');
        for(var i= 0; i < itemEls.length;i++){
            itemEls[i].onmouseover = function(){
                this.className="small-img active";
                var els = this.getElementsByTagName('img');
                if(els.length) {
                    mainImg.src = els[0].getAttribute('src')
                };
            }
            itemEls[i].onmouseout = function(){
                this.className="small-img";
            }
        }
    </script> 
 </body>
</html>